<template>
  <div class="app-container pagePublic">
    <!--label-position:label对齐方式,inline行内表单-->
    <el-form ref="searchForm" :model="searchForm" :inline="true" :label-position="labelPosition" class="formPublic">
      <el-form-item label="订单名称">
        <el-input v-model="searchForm.orderName" placeholder="请输入订单名称" />
      </el-form-item>
      <el-form-item label="订单时间段">
        <el-date-picker
          v-model="searchForm.time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          :clearable="false"
        />
      </el-form-item>
      <el-form-item label="接单员姓名">
        <el-input v-model="searchForm.personName" placeholder="请输入接单员姓名" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="table_box">
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="tableList"
        :height="tableHeight"
      >
        <el-table-column label="序号" align="center" width="80" type="index" />
        <el-table-column label="订单名称" align="center" property="orderName" show-overflow-tooltip />
        <el-table-column label="订单地址" align="center" property="orderAddress" show-overflow-tooltip />
        <el-table-column label="所属客户" align="center" property="companyName" show-overflow-tooltip />
        <el-table-column label="接单人员" align="center" property="clUserName" show-overflow-tooltip />
        <el-table-column label="建筑面积" align="center" property="areas" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.areas">{{ scope.row.areas }}m²</span>
            <span v-else ></span>
          </template>
        </el-table-column>
        <el-table-column label="订单简介" align="center" property="remark" show-overflow-tooltip />
        <el-table-column label="订单工期" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.beginTime!=null">{{ scope.row.beginTime }}-{{ scope.row.endTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="签约金额" align="center" property="commission" show-overflow-tooltip>
          <template slot-scope="scope">
            <span >{{ scope.row.commission }}元</span>
          </template>
        </el-table-column>
        <!--  <el-table-column label="完工日期" align="center" property="endTime" show-overflow-tooltip />-->
        <el-table-column label="创建时间" align="center" property="ctime" show-overflow-tooltip />
        <el-table-column label="已施工" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span :style="scope.row.dayOut>=0?'color: #1890ff':'color: red;'">{{ scope.row.dayOperation }}</span>
          </template>
        </el-table-column>
        <el-table-column label="超时" align="center" property="timestamp" show-overflow-tooltip>
          <template v-if="scope.row.dayOut<0" slot-scope="scope">
            <span style="color: red;">{{ Math.abs(scope.row.dayOut) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="剩余" align="center" property="timestamp" show-overflow-tooltip>
          <template v-if="scope.row.dayOut>=0" slot-scope="scope">
            <span style="color: #1890ff;">{{ scope.row.dayOut }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单备注" align="center" property="comment" show-overflow-tooltip />
        <el-table-column label="订单图片" align="center" width="230">
          <template slot-scope="scope">
            <div v-if="scope.row.iocn ==''||scope.row.iocn ==null">
              <img
                src="../../../static/img/noData.jpg"
                style=" width: 60px;height: 60px;margin:0px 5px;display: inline-block;text-align: center"
              >
            </div>
            <div
              v-for="(item,index) in scope.row.iocn.split(',')"
              v-else-if="scope.row.iocn !=''||scope.row.iocn !=null"
              :key="index"
              style="display: inline-block;float: inside"
            >
              <img
                :src="$store.state.apiUrl+'file/'+item"
                style=" width: 60px;height: 60px;margin:0px 5px;display: inline-block;"
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="230">
          <template slot-scope="{row}">
            <div v-if="row.attas">
              <div style="margin:5px">
                <el-button type="primary" size="mini" @click="handelEnd(row)">结束订单</el-button>
                <!-- <el-button type="primary" size="mini" @click="handelReject(row)">驳回记录</el-button> -->
              </div>
              <div style="margin:5px;">
                <el-button type="primary" size="mini" @click="reportDetail(row)">汇报</el-button>
                <el-button type="primary" size="mini" @click="handleRemark(row)">备注</el-button>
              </div>
              <div style="margin:5px;">
                <el-button type="primary" size="mini" @click="opendetail(row)">详情</el-button>
                <el-button size="mini" type="success" @click="seeEnclosure(row)">附件</el-button>
              </div>
            </div>
            <div v-else>
              <div style="margin:5px">
                <el-button type="primary" size="mini" @click="handelEnd(row)">结束订单</el-button>
                <!-- <el-button type="primary" size="mini" @click="handelReject(row)">驳回记录</el-button> -->
              </div>
              <div style="margin:5px">
                <el-button type="primary" size="mini" @click="reportDetail(row)">汇报</el-button>
                <el-button type="primary" size="mini" @click="handleRemark(row)">备注</el-button>
                <el-button type="primary" size="mini" @click="opendetail(row)">详情</el-button>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="limit" @pagination="getList" />

    <!-- 驳回记录 -->
    <el-dialog
      title="驳回记录"
      :visible.sync="rejectFormVisible"
      width="800px"
      :inline="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :before-close="cancelReject"
      class="dialogPublic table_box"
    >
      <el-table
        v-loading="listLoading3"
        :data="rejectList"
        height="500px"
      >
        <el-table-column label="序号" align="center" width="80" type="index" />
        <el-table-column label="审核时间" align="center" property="ctime" show-overflow-tooltip />
        <el-table-column label="审核备注" align="center" property="remark" show-overflow-tooltip />
      </el-table>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="cancelReject">关闭</el-button>
      </div>
      <!-- <div class="seeClass">
              <header class="passhe">
                <span style="flex: 1">序号</span>
                <span style="flex: 3">审核时间</span>
                <span style="flex: 6">审核备注</span>
              </header>
              <div class="pass" v-for="(item,index) in refusedorder" :key="index">
                <span style="flex: 1">{{index+1}}</span>
                <span style="flex: 3">
                {{item.ctime}}
              </span>
                <span style="flex: 6">{{item.remark}}</span>
              </div>
          </div> -->
    </el-dialog>
    <!--结束订单-->
    <el-dialog
      title="结束订单"
      :visible.sync="showEnd"
      :before-close="endClose"
      width="500px"
      :inline="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <el-form ref="endOrderForm" :rules="endRulesForm" :model="endOrderForm" class="formPublic">
        <el-form-item label="结束原因:" prop="endReasonId">
          <el-select v-model="endOrderForm.endReasonId" placeholder="请选择结束原因" filterable clearable>
            <el-option
              v-for="item in endReason"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="订单评分:" prop="orderScore">
          <el-rate v-model="endOrderForm.orderScore" :colors="adoptFormColor" show-score style=" padding: 8px 0px;" />
        </el-form-item>
        <el-form-item label="结算金额:" prop="orderMoney">
          <el-input v-model="endOrderForm.orderMoney" placeholder="请输入结算金额" style="width:216px" />元
        </el-form-item>
        <el-form-item label="订单备注:" prop="orderEvaluate">
          <el-input v-model="endOrderForm.orderEvaluate" :autosize="{ minRows: 2, maxRows:6}" type="textarea" placeholder="请输入订单备注" style="width:216px" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="saveEnd">保存</el-button>
        <el-button @click="endClose">取消</el-button>
      </div>
    </el-dialog>

    <!--订单备注-->
    <el-dialog
      title="订单备注"
      :visible.sync="remarkFormVisible"
      width="500px"
      :inline="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :before-close="cancelRemark"
      class="dialogPublic"
    >
      <el-form ref="remarkForm" :model="remarkForm" class="formPublic">
        <el-form-item label="订单备注:" prop="orderRemark">
          <el-input v-model="remarkForm.orderRemark" :autosize="{ minRows: 2, maxRows:6}" type="textarea" placeholder="请输入订单备注" style="width:216px" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="saveRemark">保存</el-button>
        <el-button @click="cancelRemark">取消</el-button>
      </div>
    </el-dialog>

    <!--汇报详情-->
    <el-dialog
      title="汇报详情"
      :visible.sync="reportFormVisible"
      width="1200px"
      :inline="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :before-close="cancelReport"
      class="dialogPublic table_box"
    >
      <el-table
        v-loading="listLoading2"
        :data="reportList"
        height="500px"
      >
        <el-table-column label="序号" align="center" width="80" type="index" />
        <el-table-column label="汇报描述" align="center" property="context" show-overflow-tooltip />
        <el-table-column label="创建时间" align="center" property="ctime" show-overflow-tooltip />
        <el-table-column label="汇报图片" align="center" width="230">
          <template slot-scope="scope">
            <div v-if="scope.row.attas ==''||scope.row.attas ==null">
              <img
                src="../../../static/img/noData.jpg"
                style=" width: 60px;height: 60px;margin:0px 5px;display: inline-block;text-align: center"
              >
            </div>
            <div
              v-for="(item,index) in scope.row.attas.split(',')"
              v-else-if="scope.row.attas !=''||scope.row.attas !=null"
              :key="index"
              style="display: inline-block;float: inside"
            >
              <img
                :src="$store.state.apiUrl+'file/'+item"
                style=" width: 60px;height: 60px;margin:0px 5px;display: inline-block;"
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="cancelReport">关闭</el-button>
      </div>
    </el-dialog>
 <!-- 详情 -->
    <el-dialog
      :visible.sync="showDetail"
      width="60%"
      center
      :before-close="detailClose"
    >
      <el-tabs type="border-card" v-model="tabName">
        <el-tab-pane label="订单基本信息" name="first" >
          <el-form ref="dialogForm"  :model="detailForm" class="formPublic" style="display: flex">
            <div style="width:45%;display: inline-block;">
              <el-form-item prop="orderName" label="订单名称:">
                <span>{{ detailForm.orderName }}</span>
              </el-form-item>
              <el-form-item prop="orderAddr" label="订单地址:">
                <span>{{ detailForm.orderAddr }}</span>
              </el-form-item>
              <el-form-item label="所属客户:" prop="orderClient">
                <span>{{ detailForm.orderClient }}</span>
              </el-form-item>
              <el-form-item label="开始日期:" prop="startDate">
                <span>{{ detailForm.startDate }}</span>
              </el-form-item>
              <el-form-item label="结束日期:" prop="endDate">
                <span>{{ detailForm.endDate }}</span>
              </el-form-item>
              <el-form-item label="签约金额:" prop="commission">
                <span v-if=" detailForm.commission">{{ detailForm.commission }}元</span>
                <span v-else>0元</span>
              </el-form-item>
              <el-form-item label="结算金额:" prop="settleAmount">
                <span v-if="detailForm.settleAmount">{{ detailForm.settleAmount }}元</span>
                <span v-else>0元</span>
              </el-form-item>
              <el-form-item label="订单简介:" prop="orderRemark" style="display: flex">
                <el-input
                  v-model="detailForm.orderRemark"
                  type="textarea"
                  placeholder="订单简介"
                  :disabled="true"
                  :autosize="{ minRows: 1, maxRows: 4}"
                />
              </el-form-item>
              <el-form-item label="接单人员:" prop="orderClerk">
                <span>{{ detailForm.orderClerk }}</span>
              </el-form-item>
              <el-form-item prop="buildArea" label="建筑面积:">
                <span v-if="detailForm.buildArea">{{ detailForm.buildArea}}m²</span>
                <span v-else></span>
              </el-form-item>
            </div>
            <div v-if="detailForm.orderPhoto.length>0" style="width: 45%">
              <img v-for="(item ,index) in detailForm.orderPhoto" :key="index" width="30%" :src="item" alt="">
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="订单记录" name="second" >
          <div style="min-height: 400px">
            <div>
              <h4>审核通过记录</h4>
              <header class="passhe">
                <span style="flex: 2">审核时间</span>
                <span style="flex: 3">订单评分</span>
                <span style="flex: 5">审核备注</span>
              </header>
              <div v-for="(item,index) in passorder" :key="index" class="pass">
                <span style="flex: 2">{{ item.ctime }}</span>
                <span style="flex: 3">
                  <el-rate
                    v-model="star"
                    disabled
                    :colors="colors"
                  />
                </span>
                <span style="flex: 5">{{ item.remark }}</span>
              </div>
            </div>
            <div style="margin-top: 20px">
              <h4>订单驳回记录</h4>
              <header class="passhe">
                <span style="flex: 1">序号</span>
                <span style="flex:2">驳回状态</span>
                <span style="flex: 3">驳回时间</span>
                <span style="flex: 6">驳回备注</span>
              </header>
              <div v-for="(item,index) in refusedorder" :key="index" class="pass">
                <span style="flex: 1">{{ index+1 }}</span>
                <span style="flex: 2" v-if="item.type==1&&item.status==2">审核驳回</span>
                <span style="flex: 2" v-if="item.type==3">延期驳回</span>
                 <span style="flex: 3">
                    {{ item.ctime }}
                  </span>
                <span style="flex: 6">{{ item.remark }}</span>
              </div>
            </div>
          </div>

        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!-- 附件 -->
    <yulan v-if="showEnclosure" :enclosre="enclosreTable" @closeEnclosure="closeEnclosure" />

  </div>
</template>

<script>
import yulan from '../../../static/component/yulan'
import { orderList, hisquery, orderEnd, reportDetail,saveOrderRemark } from '@/api/article'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'ComplexTable',
  components: { Pagination, yulan },
  props: ['orderStatus'],
  data() {
    return {
     /** **********订单详情*********/
      showDetail:false,//订单详情弹出      
      detailForm: {
        orderId: '', // 订单id
        orderName: '', // 订单名称
        orderAddr: '', // 订单地址
        orderClient: '', // 所属客户
        startDate: '', // 开始日期
        endDate: '', // 结束日期
        commission: '', // 佣金
        settleAmount:'',//结算金额
        orderRemark: '', // 订单简介
        orderClerk: '', // 接单人员
        buildArea: '', // 建筑面积
        orderPhoto: [], // 订单照片
        fileList: [], // 附件
        ctime: ''
      },
      passorder: [],//订单审核记录
      refusedorder: [],//订单驳回记录
      star: null,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      tabName:'first',
      /** **********订单详情结束*********/
      /** **********汇报详情**********/
      reportFormVisible: false,
      reportList: [],
      listLoading2: true, // 加载
      /** **********汇报详情结束**********/

      /** **********订单备注**********/
      remarkFormVisible: false,
      remarkForm: {
        orderId: '',
        orderRemark: ''// 订单备注
      },
      /** **********订单备注结束**********/
      /** **********附件*********/
      showEnclosure: false, // 是否显示附件列表
      enclosreTable: [], // 附件列表数组
      /** **********附件结束**********/
      /** **********结束 订单**********/
      showEnd: false,
      endOrderForm: {// 结束订单
        orderId: '',
        endReasonId: '',// 结束原因
        orderScore: 0, // 订单评分
        orderMoney: '', // 结算金额
        orderEvaluate: ''// 订单备注
      },
      adoptFormColor: ['#99A9BF', '#F7BA2A', '#FF9900'],
      endRulesForm: {
        endReasonId: [
          { required: true, message: '请选择结束原因', trigger: 'blur' }
        ],
        orderMoney:[
           { required: true, message: '请输入结算金额', trigger: 'blur' }
        ]
      },
      endReason: [// 结束订单原因
        {
          id: 1,
          name: '工作进度原因'
        },
        {
          id: 2,
          name: '工作质量原因'
        },
        {
          id: 3,
          name: '其他原因'
        }
      ], // 结束原因选择数组
      /** **********结束订单**********/
      /** **********查询**********/
      searchForm: {
        orderName: '', // 订单名称
        time: [], // 时间
        personName: ''// 接单员
      },
      /** **********查询结束**********/
      /** **********table**********/
      labelPosition: 'right', // el-form的label对齐方式
      tableList: [], // 页面table数据
      listLoading: true, // 加载
      tableHeight: window.screen.availHeight - 380, // table高度
      tableKey: 0,
      /** **********table结束**********/
      /** **********分页**********/
      total: 0,
      page: 1,
      limit: 10,
      /** **********分页结束**********/
      /** ********驳回记录********** */
      rejectFormVisible: false,
      listLoading3: true, // 加载
      rejectList: []// 驳回记录

    }
  },
  created() {

  },
  mounted() {
    console.log('施工中', this.orderStatus)
    this.getList()
  },
  methods: {
  /** **********订单详情*************/
    detailClose() {
      this.showDetail = false
    },
    opendetail(item) {
      this.tabName='first'
      this.showDetail = true
      this.detailForm = {
        orderId: item.id, // 订单id
        orderName: item.orderName, // 订单名称
        orderAddr: item.orderAddress, // 订单地址
        orderClient: item.companyName, // 所属客户
        startDate: item.beginTime, // 开始日期
        endDate: item.endTime, // 结束日期
        commission: item.commission, // 佣金
        settleAmount:item.settleAmount,//结算金额
        orderRemark: item.remark, // 订单简介
        orderClerk: item.clUserNames, // 接单人员
        buildArea: item.areas, // 建筑面积
        orderPhoto: (item.iocn == null || item.iocn == '') ? [] : item.iocn.split(','), // 订单照片
        fileList: (item.attas == null || item.attas == '') ? [] : JSON.parse(item.attas), // 附件
        ctime: item.ctime
      }
      
      hisquery({
        id:item.id,
        type:''
      }).then(res => {
        if (res.code == 1) {
          const passorder = []
          const refusedorder = []
          if (res.data.length > 0) {
            for (let i = 0; i < res.data.length; i++) {
              if (res.data[i].type == 1&&res.data[i].status==1) {
                passorder.push(res.data[i])
              } if((res.data[i].type == 1&&res.data[i].status==2)||res.data[i].type == 3) {
                refusedorder.push(res.data[i])
              }
            }
            this.passorder = passorder
            this.refusedorder = refusedorder
            if (this.passorder.length > 0) {
              this.star = this.passorder[0].assess
            } else {
              this.star = null
            }
          }
        } else {

        }
      })
    },
    /** **********订单详情结束*************/
    //* ****************汇报详情***************8*/
    reportDetail(row) {
      this.reportFormVisible = true
      this.listLoading2 = true
      this.reportList = []
      reportDetail({
        id: row.id
      }).then(res => {
        if (res.code == 1) {
          console.log(res.data)
          this.reportList = res.data
          this.listLoading2 = false
        }
      })
    },
    cancelReport() {
      this.reportFormVisible = false
    },
    //* ****************汇报结束***************8*/
    //* ****************订单备注***************8*/
    handleRemark(row) { // 弹出
      this.remarkForm = {
        orderId: row.id,
        orderRemark: row.comment
      }
      this.remarkFormVisible = true
    },
    cancelRemark() { // 取消
      this.remarkFormVisible = false
    },
    saveRemark() { // 保存
      saveOrderRemark({
        id:this.remarkForm.orderId,
        comment:this.remarkForm.orderRemark
      }).then(res =>{
        if(res.code==1){
          this.$message({
            type:'success',
            message:'订单备注保存成功'
          })
          this.remarkFormVisible = false;
          this.getList()
        }
      }).catch(()=>{})
    },
    //* ****************订单备注结束***************8*/
    /** **************附件***************/
    seeEnclosure(row) {
      this.showEnclosure = true
      this.enclosreTable = JSON.parse(row.attas)
    },
    closeEnclosure() {
      this.showEnclosure = false
    },
    /** **************附件结束***************/
    /** **************查询***************/
    getList() {
      this.listLoading = true
      orderList({
        // status:4,//施工中订单
        status: this.orderStatus,
        orderName: this.searchForm.orderName == '' ? null : this.searchForm.orderName, // 订单名称
        clUserName: this.searchForm.personName == '' ? null : this.searchForm.personName, // 接单员名称
        beginTime: this.searchForm.time[0], // 开始时间
        endTime: this.searchForm.time[1], // 结束时间
        pageNum: this.page,
        pageSize: this.limit
      }).then(res => {
        if (res.code == 1) {
          this.tableList = res.data.list
          this.total = res.data.total
          this.listLoading = false
        }
      })
    },
    /** **************查询结束***************/

    /** **************重置***************/
    reset() {
      this.page = 1
      this.limit = 10
      this.searchForm = {
        orderName: '', // 订单名称
        time: [], // 时间
        personName: ''// 接单员
      }
      this.getList()
    },
    /** **************重置结束***************/
    /** **************驳回记录***************/
    handelReject(item) { // 记录弹出
      this.listLoading3 = true
      this.rejectFormVisible = true
      hisquery(item.id).then(res => {
        if (res.code == 1) {
          console.log(res.data)
          // let refusedorder=[]
          // if(res.data.length>0){
          //  for(let i=0;i<res.data.length;i++){
          //   if(res.data[i].status!=1){
          //      refusedorder.push(res.data[i])
          //    }
          //  }
          //  this.refusedorder=refusedorder
          // }
          this.rejectList = res.data
          this.listLoading3 = false
        } else {
        }
      })
    },
    cancelReject() { // 记录关闭
      this.rejectFormVisible = false
    },
    /** **************驳回记录结束***************/

    /** **************结束订单***************/
    handelEnd(item) { // 结束订单弹出
      this.showEnd = true
      this.endOrderForm = {
        orderId: item.id,
        endReasonId: '',
        orderScore: 0, // 订单评分
        orderMoney: 0, // 结算金额
        orderEvaluate: ''// 订单备注
      }
    },
    saveEnd() { // 结束订单保存
      console.log(this.endOrderForm)
      this.$refs['endOrderForm'].validate((valid) => {
        if (valid) {
          orderEnd({
            orderId: this.endOrderForm.orderId,
            type: this.endOrderForm.endReasonId,
            remark: this.endOrderForm.orderEvaluate,//备注
            assess:this.endOrderForm.orderScore,//评分
            settleAmount:this.endOrderForm.orderMoney,//结算金额
          }).then(res => {
            if (res.code == 1) {
              this.reset()
              this.endClose()
              setTimeout(() => {
                this.$message({
                  type: 'success',
                  message: '主动结束订单成功'
                })
              }, 500)
            }
          })
        }
      })
    },
    endClose() { // 关闭结束订单
      this.showEnd = false
      this.$refs.endOrderForm.resetFields()
      this.$refs.endOrderForm.clearValidate()
    }
    /** **************结束订单***************/
  }
}
</script>
<style lang="scss">
   //详情
  .passhe {
    display: flex;
    justify-content: space-between;
    box-shadow:0px 2px 4px 0px rgba(203,209,223,0.5);
    margin-top: 20px;
  }
  .pass {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
  .seeClass {
    padding:0px 5px;
    border: 1px solid #DCDFE6;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04);
    min-height:400px;
      .passhe {
        display: flex;
        justify-content: space-between;
        box-shadow:0px 2px 4px 0px rgba(203,209,223,0.5);
        margin-top: 20px;
      }
      .pass {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
      }
  }
 </style>
